<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客列表页</title>
    <!-- 需要使用link引入所涉及的样式 -->
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_list.css">
    <!-- 引入 editor.md 的依赖 -->
    <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
    <script src="js/jquery.min.js"></script>
    <!-- jquery是editor.md的依赖,不是这个的一部分,这个是需要重新引入的 -->
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="editor.md/editormd.js"></script>

</head>
<body>
    <!-- 这是导航栏 -->
    <div class="nav">
        <img src="./picture/p4.png">
        <span>我的博客系统</span>
        <!-- 如何让元素一个在左一个在右,CSS中有一个浮动其实可以做到,但是浮动里面有坑,就不使用了 
            2.两个元素的话可以使用space-between多个就不行了,3.给假如一个没有内容的空白元素进行占位,但是有可能会影响响应式布局 -->
        <div class="spacer">
            <!-- 空白元素 -->
        </div>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="logout">注销</a>
    </div>
    <!-- 这里的container 作为页面的版心 -->
    <div class="container">
        <!-- 左侧个人信息 -->
        <div class="left">
            <!-- 整个用户信息  -->
            <div class="card">
                <img src="./picture/p5.png" alt="">
                <!-- <h3>派总</h3> -->
                <h3></h3>
                <a href="#">github地址</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>2</span>
                    <span>1</span>
                </div>
            </div>
        </div>
        <!-- 右侧内容详情 -->
        <div class="right">
            <!-- 一个blog就是一个博客 -->
            <div class="blog">
                <!-- <div class="title">
                    我的第一篇博客
                </div> -->
                <!-- 博客发布时间 -->
                <!-- <div class="date">
                    2022-05-06
                </div> -->
                <!-- 博客摘要 -->
                <!-- <div class="desc">
                    天，灰蒙蒙。冷雨，淅淅沥沥地下。在风与雨的博弈中，雪最终挣脱天庭的羁绊，以一种绝美的姿态，袅袅娜娜，飘落凡间。
一场经年的雪花，在我热切的期盼中，终于“千呼万唤始出来”。雪花仙子，归去来兮，飘落草木人间，了却前世的一段尘缘。
我立在雪空下，任寒风吹乱我的头发，任雪花撩拨我的思绪。我怀揣一颗虔诚的心，迎接这来自天庭的精灵，感激上苍的悲悯和恩赐，感动生命的灿然和美好。
风牵着雪花，在天地间飘忽不定，如贵妃醉酒般步履凌乱，却风情万种。雪花，一片片，扑簌簌，落在梅心间，落在草丛里，落在湖面上。一夜之间，天地皓首，山河静寂。
记得，从前的雪，总会如期而至，不疾不徐，一下就是好几天。地上积了厚厚的一层雪，像棉被一样裹着油菜、麦苗。孩子们堆雪人、打雪仗，在雪地里疯跑，脸蛋和小手冻得红扑扑的，却乐此不疲。
                </div>
                <a href="#">查看全文 &gt;&gt;</a> -->
            </div>
            <div class="blog">
                <!-- <div class="title">
                    我的第一篇博客
                </div> -->
                <!-- 博客发布时间 -->
                <!-- <div class="date">
                    2022-05-06
                </div> -->
                <!-- 博客摘要 -->
                <!-- <div class="desc">
                    天，灰蒙蒙。冷雨，淅淅沥沥地下。在风与雨的博弈中，雪最终挣脱天庭的羁绊，以一种绝美的姿态，袅袅娜娜，飘落凡间。
一场经年的雪花，在我热切的期盼中，终于“千呼万唤始出来”。雪花仙子，归去来兮，飘落草木人间，了却前世的一段尘缘。
我立在雪空下，任寒风吹乱我的头发，任雪花撩拨我的思绪。我怀揣一颗虔诚的心，迎接这来自天庭的精灵，感激上苍的悲悯和恩赐，感动生命的灿然和美好。
风牵着雪花，在天地间飘忽不定，如贵妃醉酒般步履凌乱，却风情万种。雪花，一片片，扑簌簌，落在梅心间，落在草丛里，落在湖面上。一夜之间，天地皓首，山河静寂。
记得，从前的雪，总会如期而至，不疾不徐，一下就是好几天。地上积了厚厚的一层雪，像棉被一样裹着油菜、麦苗。孩子们堆雪人、打雪仗，在雪地里疯跑，脸蛋和小手冻得红扑扑的，却乐此不疲。
                </div>
                <a href="#">查看全文 &gt;&gt;</a> -->
            </div>
        </div>
    </div>

    <!-- 使用ajax构造请求 ,这里的路径尽量去放到一个文本里面,不要放链接,但是这里就放连接了,但是很有可能会出错-->
    <!-- <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> -->
   <script>
       //页面加载的时候,使用ajax给服务器发送请求,获取到相应的响应
       function getBlogList(){
           $.ajax({
               type: 'get',
               url: 'blog',
               success: function(body){
                   //此时的body就是一个js对象数组(这里的转换是原生就转换好的),每一个元素就是js对象,然后这里就需要把这些js对象构造成形如上面的类型
                   //1.先把right里面的内容进行清空操作,然后再进行插入操作
                   let rightDiv = document.querySelector(".right");
                   //将里面的内容进行清空
                   rightDiv.innerHTML = '';
                   //然后再遍历整个js数组,往right里面插入元素
                   for(let blog of body){
                       //先构造一个blogDiv,然后往里面插入对应的元素,然后再将这个blogDiv插入到right里面就可以l
                       //这里都是createElement不是querySelector....
                       let blogDiv = document.createElement("div");
                       blogDiv.className = "blog";
                       //然后再构造里面的元素
                       //博客标题
                       let titleDiv = document.createElement('div');
                       titleDiv.className = 'title';
                       titleDiv.innerHTML = blog.title;
                       blogDiv.appendChild(titleDiv);
                       //博客发布时间
                       let dateDiv = document.createElement('div');
                       dateDiv.className = 'date';
                       dateDiv.innerHTML = blog.postTime;
                       blogDiv.appendChild(dateDiv);
                       //博客摘要
                       let descDiv = document.createElement('div');
                       descDiv.innerHTML = blog.content;
                       descDiv.className = 'desc';
                    //    descDiv.id = 'descId';
                       
                    //    deitormd.markdownToHTML('descId',{
                    //     markdown: blog.content
                    //    });
                       blogDiv.appendChild(descDiv);
                       //查看全文链接
                       let a = document.createElement('a');
                       
                       a.innerHTML = "查看全文 &gt;&gt;";
                       //设置a.href点击这个连接之后可以进行跳转到博客详情页面
                       //这个跳转就需要告知服务器要访问的是哪个博客的详情页
                       a.href = "blog_detail.html?blogId=" + blog.blogId;
                       blogDiv.appendChild(a);
                       
                       //最后要把整个blogDiv插入到完整的rightDiv中去
                       rightDiv.appendChild(blogDiv);
                   }
               },
               error: function(){
                   //console.log("获取博客列表失败");
                   alert("获取博客列表失败!");
               }
            });

           
       }
       //调用这个方法
       getBlogList();
       

       //在这里再加上一个逻辑,就是通过GET /login这个接口来获取下当前的登录状态
       function getUserInfo(){
           $.ajax({
               type: "get",
               url: "login",
               success: function(body){
                   //当前的body就是一个User对象了,看着对象的userId是不是大于0的,如果大于就表示当前已经登录,如果为0就表示当前未登录
                   if(body.userId && body.userId > 0){
                       //当前已经登录了,

                       //登录成功了,就可以把当前的用户名设置到页面上去了,而在这里的其他信息就先不设置了,在设计数据库的时候就没有设置,想设置的话,就在数据库里面设置一下就可以了
                       let h3 = document.querySelector(".card>h3");
                       h3.innerHTML = body.username;
                   }else{
                       //当前未登录,需要跳转到登录页面
                       alert("当前您尚未登录,请您登录过后再进行访问");
                       //通过location.assign来进行跳转页面到blog_login.html
                       location.assign("blog_login.html");
                   }
               },
               error: function(){
                    //当前未登录,需要跳转到登录页面
                    alert("当前您尚未登录,请您登录过后再进行访问");
                    //通过location.assign来进行跳转页面到blog_login.html
                    location.assign("blog_login.html");
               }
           });
       }
       getUserInfo();
   </script> 
</body>
</html>